<div class="project-container">
  <div class="container">
    <!-- <div class="head">
      <div class="search">
        <button nz-button nzType="primary" *ngIf="status.pageAuthorty.ProjectManage" 
          (click)="editProject(null)">新建项目</button>
        <nz-input-group nzSearch [nzSuffix]="suffixButton" style="width: 340px;margin-left: 25px;">
          <input maxlength="30" type="text" nz-input placeholder="请输入关键字" (keyup)="keyupEvent($event)"
            [(ngModel)]="findProject.filter">
        </nz-input-group>
        <ng-template #suffixButton>
          <button nz-button nzType="primary" nzSearch (click)="search()">搜索</button>
        </ng-template>
      </div>
    </div> -->

    <div class="body">
      <!-- <div class="body-left">
        <div class="selects">
          <input maxlength="30" nz-input placeholder="项目名称" style="width: 210px;margin-bottom: 20px"
            [(ngModel)]="findProject.filter">
          <nz-select style="width: 210px;margin-bottom: 20px" [(ngModel)]="findProject.type" nzPlaceHolder="项目类型">
            <nz-option [nzValue]="list.id" [nzLabel]="list.name" *ngFor='let list of typeLists'></nz-option>
          </nz-select>
          <nz-select style="width: 210px;margin-bottom: 20px" [(ngModel)]="findProject.status" nzPlaceHolder="项目状态">
            <nz-option [nzValue]="list.id" [nzLabel]="list.name" *ngFor='let list of statusLists'></nz-option>
          </nz-select>
          <div style="width: 210px;margin-bottom: 20px">
            重点：
            <nz-radio-group [(ngModel)]="findProject.isImportant">
              <label nz-radio nzValue="1">是</label>
              <label nz-radio nzValue="2">否</label>
            </nz-radio-group>
          </div>
        </div>
        <div class="function">
          <button nz-button nzType="default" style="width: 80px" (click)="reset()">重置</button>
          <button nz-button nzType="primary" style="margin-left: 20px;width: 80px;" (click)="screen()">搜索</button>
        </div>
      </div> -->
      <div class="body-right">
        <div class="right-head">
          当前 - 全部项目
        </div>
        <div class="right-content">
          <div class="card" *ngFor='let item of projectLists'
            (mouseover)="item.iconStyle = { 'display': 'inline-block' }"
            (mouseout)="item.iconStyle = { 'display': 'none' }">
            <div class="card-left" (click)="routerTo(item)">
              <div class="img" [ngStyle]="item.img"></div>
            </div>
            <div class="card-right">
              <div class="right-icon">
                <i nz-icon type="form" title="编辑" theme="outline" class="form" [ngStyle]='item.iconStyle'
                  *ngIf="status.pageAuthorty.ProjectManage  && status.primaryId == item.creatorUserId || status.userId == 1" (click)="editProject(item)"></i>
                <!-- <i nz-icon type="delete" theme="outline" class="delete" [ngStyle]='item.iconStyle'
                  *ngIf="status.pageAuthorty.ProjectManage && status.primaryId == item.creatorUserId || status.roleCode =='Admin'" (click)="deleteProject(item.id)"></i> -->
              </div>
              <div style="clear: both;"></div>
              <div (click)="routerTo(item)" style="transform: translateY(-8px);">
                <div class="right-list">
                  <span class="span-one" [title]="item.name">{{item.name}}</span>
                </div>
                <div class="right-list">
                  <span class="span-two">
                    编号：{{item.code}}
                  </span>
                </div>
                <div class="right-list">
                  <span class="span-two">
                    类型：{{item.type|project:'type'}}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div style="text-align: center;margin-top: 10px">
          <nz-pagination [nzPageSize]="findProject.maxResultCount" [nzPageIndex]="nzPageIndex" [nzTotal]="nzTotal"
            (nzPageIndexChange)="pageChange($event)" nzShowQuickJumper [nzShowTotal]="totalTemplate"></nz-pagination>
          <ng-template #totalTemplate let-total>
            共{{nzTotal}}条
          </ng-template>
        </div> -->
      </div>
    </div>
  </div>
</div>

<!-- 新建 -->
<nz-modal [(nzVisible)]="isAddVisible" [nzTitle]="modalAddTitle" [nzContent]="modalAddContent"
  [nzFooter]="modalAddFooter" (nzOnCancel)="handleCancel()" nzWidth=800  nzMaskClosable="false" >
  <ng-template #modalAddTitle>
    {{addProjectModel.name? addProjectModel.name :'新建项目'}}
  </ng-template>

  <ng-template #modalAddContent>
    <div nz-row class="modal">
      <div nz-col nzSpan=3>
        名称
      </div>
      <div nz-col nzSpan=8>
        <input maxlength="30" nz-input placeholder="项目名称" [(ngModel)]="addProjectModel.name">
        <span style="color: red;margin-left: 5px">*</span>
      </div>
      <div nz-col nzSpan=3 nzOffset=2>
        编号
      </div>
      <div nz-col nzSpan=8>
        <input maxlength="50" nz-input placeholder="项目编号" [(ngModel)]="addProjectModel.code">
        <span style="color: red;margin-left: 5px">*</span>
      </div>
    </div>
    <div nz-row class="modal">
      <div nz-col nzSpan=3>
        地址
      </div>
      <div nz-col nzSpan=8>
        <input maxlength="50" nz-input placeholder="项目地址" (click)='choosePoint()' [(ngModel)]="addProjectModel.address">
      </div>
      <div nz-col nzSpan=3 nzOffset=2>
        类型
      </div>
      <div nz-col nzSpan=8>
        <nz-select style="width: 235px;" [(ngModel)]="addProjectModel.type" nzPlaceHolder="项目类型">
          <nz-option [nzValue]="item.id" [nzLabel]="item.name" *ngFor='let item of typeLists'></nz-option>
        </nz-select>
      </div>
    </div>
    <div nz-row class="modal">
      <div nz-col nzSpan=3>
        状态
      </div>
      <div nz-col nzSpan=8>
        <nz-select style="width: 235px;" [(ngModel)]="addProjectModel.status" nzPlaceHolder="项目类型">
          <nz-option [nzValue]="item.id" [nzLabel]="item.name" *ngFor='let item of statusLists'></nz-option>
        </nz-select>
      </div>
      <div nz-col nzSpan=3 nzOffset=2>
        工期
      </div>
      <div nz-col nzSpan=8>
        <input maxlength="30" nz-input placeholder="工期" [(ngModel)]="addProjectModel.takeLimit">
      </div>
    </div>
    <div nz-row class="modal">
      <div nz-col nzSpan=3>
        投资总额
      </div>
      <div nz-col nzSpan=8>
        <nz-input-number [nzMax]="999999999"  [(ngModel)]="addProjectModel.totalInCome" name="num" id="num" [nzPlaceHolder]="'0'"
          style="width:94%; padding-right: 48px; box-sizing: border-box"></nz-input-number> <span style="position: absolute;
          right: 41px;color: #ccc "> 万元 </span>
        <!-- <input maxlength="30" nz-input placeholder="投资总额" [(ngModel)]="addProjectModel.totalInCome"> -->
      </div>
      <div nz-col nzSpan=3 nzOffset=2>
        所属机构
      </div>
      <div nz-col nzSpan=8>
        <input maxlength="50" nz-input placeholder="所属机构" [(ngModel)]="addProjectModel.departName">
      </div>
    </div>
    <div style="border:1px solid #ddd; width:100%;padding-top:20px;border-left: 0;border-right: 0">
      <div nz-row class="modal">
        <div nz-col nzSpan=3>
          建设单位
        </div>
        <div nz-col nzSpan=8>
          <input maxlength="50" nz-input placeholder="建设单位" [(ngModel)]="addProjectModel.companyName">
        </div>
        <div nz-col nzSpan=3 nzOffset=2>
          联系人
        </div>
        <div nz-col nzSpan=8>
          <input maxlength="50" nz-input placeholder="联系人" [(ngModel)]="addProjectModel.companyLinkman">
        </div>
      </div>
      <div nz-row class="modal">
        <div nz-col nzSpan=3>
          联系电话
        </div>
        <div nz-col nzSpan=8>
          <input maxlength="11" nz-input placeholder="联系电话" [(ngModel)]="addProjectModel.companyLinkphone">
          <!-- <span style="color: red;margin-left: 5px">*</span> -->
        </div>
        <div nz-col nzSpan=3 nzOffset=2>
          联系地址
        </div>
        <div nz-col nzSpan=8>
          <input maxlength="50" nz-input placeholder="联系地址" [(ngModel)]="addProjectModel.companyAddress">
        </div>
      </div>
    </div>
    <div nz-row class="modal">
      <div nz-col nzSpan=3>
        是否重点
      </div>
      <div nz-col nzSpan=8>
        <nz-radio-group [(ngModel)]="addProjectModel.isImportant">
          <label nz-radio nzValue='1'>是</label>
          <label nz-radio nzValue='2'>否</label>
        </nz-radio-group>
      </div>
      <div nz-col nzSpan=3 nzOffset=2>
        是否立项
      </div>
      <div nz-col nzSpan=8>
        <nz-radio-group [(ngModel)]="addProjectModel.isApprove">
          <label nz-radio nzValue="1">是</label>
          <label nz-radio nzValue="2">否</label>
        </nz-radio-group>
      </div>
    </div>
    <div nz-row class="modal">
      <div nz-col nzSpan=3>
        是否关注
      </div>
      <div nz-col nzSpan=8>
        <nz-radio-group [(ngModel)]="addProjectModel.mark">
          <label nz-radio nzValue="1">是</label>
          <label nz-radio nzValue="2">否</label>
        </nz-radio-group>
      </div>
      <div nz-col nzSpan=3 nzOffset=2>
        项目描述
      </div>
      <div nz-col nzSpan=8>
        <input maxlength="500" nz-input placeholder="项目描述" [(ngModel)]="addProjectModel.description">
      </div>
    </div>
    <div nz-row class="modal-text">
      <div nz-col nzSpan=3 class="modal-left">
        封面
      </div>
      <div nz-col nzSpan=8>
        <label nz-col nzSpan=2 class="t_photo" for="fileimg">
          <input class="fbtn" id="fileimg" name="fileproductimg" type="file" (change)="fileChange($event)"
            accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" #upload>
          <!-- 图片加载 -->
          <div id="divLogoImg" style="width:100%;height:100%;">
            <img *ngIf='addProjectModel.imageUrl' [src]='addProjectModel.imageUrl' style="width:100%;height:100%">
            <div *ngIf='!addProjectModel.imageUrl' class="top">
              <i nz-icon type="plus" theme="outline"></i>
            </div>
            <div *ngIf='!addProjectModel.imageUrl' class="bottom">
              <span>上传图片</span>
            </div>
          </div>
          <!-- 上传插件 -->
          <nag-file-uploader style="display: none" [autoUpload]="true" [flowFiles]="imageQueue" [multiple]="false"
            (onSuccess)="fileSuccess($event)" [fileHost]="FILEURL" #imageUploader></nag-file-uploader>
        </label>
        <!-- <div class="upload" (click)="upload.click()" *ngIf='addimgShow'>
          <div class="top">
            <i nz-icon type="plus" theme="outline"></i>
          </div>
          <div class="bottom">
            <span>上传照片</span>
          </div>
        </div>
        <div class="upload" [ngStyle]="addimgStyle" *ngIf='!addimgShow' (click)="upload.click()"></div>
        <input type="file" class="input-file" (change)="fileChange($event)"
          accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" #upload>
        <nag-file-uploader style="display: none" [autoUpload]="true" [flowFiles]="imageQueue" [multiple]="false"
          (onSuccess)="fileSuccess($event)" [fileHost]="FILEURL" #imageUploader></nag-file-uploader> -->
      </div>
    </div>
  </ng-template>

  <ng-template #modalAddFooter>
    <button nz-button nzType="primary" appDebounceClick (debounceClick)="handleOk($event)" >保存</button>
  </ng-template>
</nz-modal>
<!-- 项目地址选点 -->
<nz-modal [(nzVisible)]="isShowChoosePoint" [nzTitle]="pointTitle" [nzContent]="pointContent" nzMaskClosable = 'false'
  [nzFooter]="modalAddFooter1" (nzOnCancel)="chooseCancel()" nzWidth=800>

  <ng-template #pointTitle>
    项目地址
  </ng-template>
  <ng-template #pointContent>
    <div nz-row class="proInfo-inp" style="padding: 10px;">
      <span nz-col nzSpan=2  style="margin-top: 5px;" class="align-span">地址：</span>
      <div nz-col nzSpan=21 style="position: relative;">
        <input nz-input [(ngModel)]="addProjectModel.address" (keyup)="keyEvent($event)" (focus)="keyEvent($event)" 
          #AddressInput>
        <div class="map-address">
          <span class="address-item" *ngFor="let item of mapKeyWordList; let idx = index"  (click)="chooseAddress(idx)">
           
              <label class="address-title" title="{{item.title}}">{{item.title}}</label>
              <label class="address-add">{{item.address}}</label>
           

          </span>
        </div>
      </div>
    </div>
    <div class="content-body">
      <abm-map #map (ready)="onReady($event)" [options]="options" style="height: 100%;"></abm-map>
    </div>

  </ng-template>
  <ng-template #modalAddFooter1>
    <button nz-button nzType="primary" (click)="handleOkpoint()" style="width: 200px">保存</button>
  </ng-template>
</nz-modal>
